<template>
  <div>
    <h1>行程调查表</h1>

    <div class="top">
      <el-form :model="form" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="电话">
          <el-input v-model="form.region" />
        </el-form-item>


        <el-form-item label="到达地">
          <el-radio-group v-model="form.resource">
            <el-radio label="昌平" />
            <el-radio label="西安" />
            <el-radio label="海淀" />
            <el-radio label="无" />
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>


  <div class="cont">


    <el-table :data="talist" style="width: 100%">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="region" label="电话" />
      <el-table-column prop="timr" label="日期" />
      <el-table-column prop="resource" label="风险地" />

      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <div class="xia">
    <div>
      昌平：{{ num[0] }}
    </div>
    <div>
      西安：{{num[1] }}
    </div>
    <div>
      海淀：{{ num[2] }}
    </div>
    <div>
      低风险：{{ num[3] }}
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, computed } from 'vue'
import { useStore } from 'vuex';

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  resource: '',
  timr: new Date().toLocaleString(),
  id:new Date().getTime()
})
const stest = useStore()

const num=computed(()=>{
    return stest.getters.nums
})
const talist=ref(stest.state.list)

const handleDelete = (a, b) => {

  stest.commit('del', a)

}

const onSubmit = () => {
  let obj={...form}
  stest.commit('add', obj)

  form.name=form.region=form.resource=''




}
</script>

<style lang="scss" scoped>
h1 {
  text-align: center;
}

.top {
  width: 90%;
  margin: auto;
}

.cont {
  width: 90%;
  margin: auto;
}

.xia {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
</style>